<template>
    <div class="wrapper">
        <div class="container" @click="takephoto">
            <image class="image" v-if="src" :src="src" resize="contain"></image>
        </div>
        <text class="text" :value="fileUrl"></text>
        <div class="uploadContainer" @click="uploadFile">
            <text class="text">上传文件</text>
        </div>
        <text class="text" :value="status"></text>
    </div>
</template>

<script>
    let globalData01 = {
        src: '',
        fileUrl: '',
        status: ''
    }
    export default {
        name: 'HelloUploadFile',
        data() {
            return globalData01
        },
        methods: {
            takephoto() {
                const mode = weex.requireModule('photo')
                mode.takePhoto(function (map) {
                    const flag = 'file://'
                    globalData01.src = flag + map.imgPath
                    globalData01.fileUrl = map.imgPath
                })
            },
            ablumselect() {
                const mode = weex.requireModule('photo')
                mode.ablumSelect(function (map) {
                    const flag = 'file://'
                    globalData01.src = flag + map.imgPath
                    globalData01.fileUrl = map.imgPath
                })
            },
            uploadFile() {
                const mode = weex.requireModule('upload')
                const tool = weex.requireModule('tool')
                tool.showLoadDialog()
                mode.uploadByUrl('http://172.16.6.19:8889/MobileWCFREST/FileSaveFileLocal.aspx', globalData01.fileUrl, function (map) {
                    let isUploadSuccess = map.isUploadSuccess
                    globalData01.status = isUploadSuccess ? '上传成功' : '上传失败'
                    tool.hideLoadDialog()
                })
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .container {
        width: 602px;
        height: 602px;
        border-width: 2px;
        border-color: #dddddd;
        background-color: #F5F5F5;
        justify-content: center;
        align-items: center;
    }

    .image {
        width: 600px;
        height: 600px;
    }

    .text {
        width: 600px;
        height: 100px;
    }

    .uploadContainer {
        width: 600px;
        height: 100px;
        background-color: #996699;
        justify-content: center;
        align-items: center;
    }
</style>